<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理 - 大宗商品交易B2B商城</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .order-status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        .order-status-pending {
            background-color: #fef3c7;
            color: #92400e;
        }
        .order-status-paid {
            background-color: #dbeafe;
            color: #1e40af;
        }
        .order-status-shipped {
            background-color: #dcfce7;
            color: #166534;
        }
        .order-status-completed {
            background-color: #ede9fe;
            color: #5b21b6;
        }
        .order-status-cancelled {
            background-color: #f3e8ff;
            color: #7e22ce;
        }
        .order-item {
            transition: all 0.3s ease;
        }
        .order-item:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        body {
            background-color: #f3f4f6;
            overflow-y: auto;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 面包屑导航 -->
    <section class="bg-white py-4">
        <div class="container mx-auto px-4">
            <nav class="text-gray-600">
                <a href="home.html" class="hover:text-blue-600">首页</a>
                <span class="mx-2">></span>
                <span class="text-gray-900">订单管理</span>
            </nav>
        </div>
    </section>

    <div class="container mx-auto px-4 py-8">
        <h1 class="text-2xl font-bold text-gray-800 mb-6">订单管理</h1>
        
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 左侧筛选区 -->
            <div class="w-full lg:w-1/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-lg font-bold text-gray-800 mb-4">订单筛选</h2>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">订单状态</label>
                        <div class="space-y-2">
                            <div class="flex items-center">
                                <input type="checkbox" id="status-all" class="mr-2 h-5 w-5 text-blue-600 rounded" checked>
                                <label for="status-all">全部</label>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" id="status-pending" class="mr-2 h-5 w-5 text-blue-600 rounded">
                                <label for="status-pending">待付款</label>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" id="status-paid" class="mr-2 h-5 w-5 text-blue-600 rounded">
                                <label for="status-paid">待发货</label>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" id="status-shipped" class="mr-2 h-5 w-5 text-blue-600 rounded">
                                <label for="status-shipped">待收货</label>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" id="status-completed" class="mr-2 h-5 w-5 text-blue-600 rounded">
                                <label for="status-completed">已完成</label>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" id="status-cancelled" class="mr-2 h-5 w-5 text-blue-600 rounded">
                                <label for="status-cancelled">已取消</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">下单时间</label>
                        <div class="grid grid-cols-2 gap-2">
                            <input type="date" class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600">
                            <input type="date" class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600">
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2">订单号</label>
                        <input type="text" placeholder="请输入订单号" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600">
                    </div>
                    
                    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg">
                        <i class="fas fa-filter mr-2"></i>筛选订单
                    </button>
                </div>
            </div>
            
            <!-- 右侧订单列表 -->
            <div class="w-full lg:w-3/4">
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <div class="hidden md:grid grid-cols-12 bg-gray-100 py-3 px-4 font-bold text-gray-600">
                        <div class="col-span-4">订单信息</div>
                        <div class="col-span-2 text-center">订单金额</div>
                        <div class="col-span-2 text-center">订单状态</div>
                        <div class="col-span-2 text-center">下单时间</div>
                        <div class="col-span-2 text-center">操作</div>
                    </div>
                    
                    <!-- 订单项 -->
                    <div class="order-item border-b border-gray-200 py-4 px-4">
                        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                            <div class="md:col-span-4">
                                <div class="font-bold mb-1">订单号: 20251020001</div>
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-lg flex items-center justify-center mr-3">
                                        <div class="bg-white border-2 border-dashed rounded-xl w-6 h-6" />
                                    </div>
                                    <div>
                                        <div class="font-medium">热轧卷板 Q235B 3.0*1500*C</div>
                                        <div class="text-gray-600 text-sm">数量: 10吨</div>
                                    </div>
                                </div>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">订单金额</div>
                                <span class="font-bold text-orange-600">￥42,000</span>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">订单状态</div>
                                <span class="order-status-badge order-status-shipped">待收货</span>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">下单时间</div>
                                <div>2025-10-20</div>
                                <div class="text-gray-600 text-sm">14:30</div>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">操作</div>
                                <div class="flex flex-col space-y-2">
                                    <button class="text-blue-600 hover:text-blue-800 text-sm">
                                        <i class="fas fa-eye mr-1"></i>查看详情
                                    </button>
                                    <button class="text-orange-600 hover:text-orange-800 text-sm">
                                        <i class="fas fa-truck mr-1"></i>确认收货
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="order-item border-b border-gray-200 py-4 px-4">
                        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                            <div class="md:col-span-4">
                                <div class="font-bold mb-1">订单号: 20251015002</div>
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-gradient-to-r from-green-400 to-teal-500 rounded-lg flex items-center justify-center mr-3">
                                        <div class="bg-white border-2 border-dashed rounded-xl w-6 h-6" />
                                    </div>
                                    <div>
                                        <div class="font-medium">冷轧卷板 DC01 1.0*1200*C</div>
                                        <div class="text-gray-600 text-sm">数量: 5吨</div>
                                    </div>
                                </div>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">订单金额</div>
                                <span class="font-bold text-orange-600">￥24,000</span>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">订单状态</div>
                                <span class="order-status-badge order-status-completed">已完成</span>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">下单时间</div>
                                <div>2025-10-15</div>
                                <div class="text-gray-600 text-sm">09:15</div>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">操作</div>
                                <div class="flex flex-col space-y-2">
                                    <button class="text-blue-600 hover:text-blue-800 text-sm">
                                        <i class="fas fa-eye mr-1"></i>查看详情
                                    </button>
                                    <button class="text-gray-600 hover:text-gray-800 text-sm">
                                        <i class="fas fa-redo mr-1"></i>再次购买
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="order-item border-b border-gray-200 py-4 px-4">
                        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                            <div class="md:col-span-4">
                                <div class="font-bold mb-1">订单号: 20251010003</div>
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-gradient-to-r from-purple-400 to-pink-500 rounded-lg flex items-center justify-center mr-3">
                                        <div class="bg-white border-2 border-dashed rounded-xl w-6 h-6" />
                                    </div>
                                    <div>
                                        <div class="font-medium">中厚板 Q345B 20*2000*8000</div>
                                        <div class="text-gray-600 text-sm">数量: 8吨</div>
                                    </div>
                                </div>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">订单金额</div>
                                <span class="font-bold text-orange-600">￥36,000</span>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">订单状态</div>
                                <span class="order-status-badge order-status-paid">待发货</span>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">下单时间</div>
                                <div>2025-10-10</div>
                                <div class="text-gray-600 text-sm">16:45</div>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">操作</div>
                                <div class="flex flex-col space-y-2">
                                    <button class="text-blue-600 hover:text-blue-800 text-sm">
                                        <i class="fas fa-eye mr-1"></i>查看详情
                                    </button>
                                    <button class="text-red-600 hover:text-red-800 text-sm">
                                        <i class="fas fa-times mr-1"></i>取消订单
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="order-item border-b border-gray-200 py-4 px-4">
                        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                            <div class="md:col-span-4">
                                <div class="font-bold mb-1">订单号: 20251005004</div>
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg flex items-center justify-center mr-3">
                                        <div class="bg-white border-2 border-dashed rounded-xl w-6 h-6" />
                                    </div>
                                    <div>
                                        <div class="font-medium">螺纹钢 HRB400E 12mm</div>
                                        <div class="text-gray-600 text-sm">数量: 15吨</div>
                                    </div>
                                </div>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">订单金额</div>
                                <span class="font-bold text-orange-600">￥57,000</span>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">订单状态</div>
                                <span class="order-status-badge order-status-pending">待付款</span>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">下单时间</div>
                                <div>2025-10-05</div>
                                <div class="text-gray-600 text-sm">11:20</div>
                            </div>
                            <div class="md:col-span-2 text-center">
                                <div class="md:hidden text-gray-600 mb-1">操作</div>
                                <div class="flex flex-col space-y-2">
                                    <button class="text-blue-600 hover:text-blue-800 text-sm">
                                        <i class="fas fa-eye mr-1"></i>查看详情
                                    </button>
                                    <button class="text-green-600 hover:text-green-800 text-sm">
                                        <i class="fas fa-credit-card mr-1"></i>立即付款
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页控件 -->
                <div class="bg-white rounded-lg shadow-md p-4 mt-6 flex justify-between items-center">
                    <div class="text-gray-600">
                        显示第 1-4 件订单，共 28 件
                    </div>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="px-3 py-1 rounded border border-blue-600 bg-blue-600 text-white">1</button>
                        <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">2</button>
                        <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">3</button>
                        <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">...</button>
                        <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">7</button>
                        <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单详情弹窗 -->
    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold text-gray-800">订单详情</h2>
                    <button class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <h3 class="text-lg font-bold mb-3">订单信息</h3>
                        <div class="space-y-2">
                            <div class="flex">
                                <span class="text-gray-600 w-24">订单号:</span>
                                <span class="font-medium">20251020001</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-600 w-24">下单时间:</span>
                                <span>2025-10-20 14:30</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-600 w-24">订单状态:</span>
                                <span class="order-status-badge order-status-shipped">待收货</span>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-bold mb-3">收货信息</h3>
                        <div class="space-y-2">
                            <div class="flex">
                                <span class="text-gray-600 w-24">收货人:</span>
                                <span>张三</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-600 w-24">联系电话:</span>
                                <span>138****1234</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-600 w-24">收货地址:</span>
                                <span>上海市浦东新区陆家嘴金融中心环路1000号</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-6">
                    <h3 class="text-lg font-bold mb-3">商品清单</h3>
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <table class="w-full">
                            <thead class="bg-gray-100">
                                <tr>
                                    <th class="text-left py-3 px-4">商品信息</th>
                                    <th class="text-center py-3 px-4">单价</th>
                                    <th class="text-center py-3 px-4">数量</th>
                                    <th class="text-center py-3 px-4">小计</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-gray-200">
                                    <td class="py-4 px-4">
                                        <div class="flex items-center">
                                            <div class="w-16 h-16 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-lg flex items-center justify-center mr-4">
                                                <div class="bg-white border-2 border-dashed rounded-xl w-8 h-8" />
                                            </div>
                                            <div>
                                                <h3 class="font-bold">热轧卷板 Q235B 3.0*1500*C</h3>
                                                <p class="text-gray-600 text-sm">材质: Q235B | 规格: 3.0*1500*C</p>
                                                <p class="text-gray-600 text-sm">供应商: 河北钢铁集团</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center py-4 px-4">
                                        <span class="font-bold text-orange-600">￥4,200</span>
                                        <span class="text-gray-600">/吨</span>
                                    </td>
                                    <td class="text-center py-4 px-4">10吨</td>
                                    <td class="text-center py-4 px-4 font-bold text-orange-600">￥42,000</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <h3 class="text-lg font-bold mb-3">支付信息</h3>
                        <div class="space-y-2">
                            <div class="flex">
                                <span class="text-gray-600 w-24">支付方式:</span>
                                <span>账户余额</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-600 w-24">支付时间:</span>
                                <span>2025-10-20 14:35</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-600 w-24">支付状态:</span>
                                <span class="text-green-600">已支付</span>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-bold mb-3">物流信息</h3>
                        <div class="space-y-2">
                            <div class="flex">
                                <span class="text-gray-600 w-24">物流公司:</span>
                                <span>顺丰物流</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-600 w-24">物流单号:</span>
                                <span>SF1234567890</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-600 w-24">发货时间:</span>
                                <span>2025-10-21 09:15</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="border-t border-gray-200 pt-4">
                    <div class="flex justify-end">
                        <div class="w-full md:w-1/3">
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-gray-600">商品总价:</span>
                                    <span>￥42,000</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">运费:</span>
                                    <span>￥800</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">优惠券:</span>
                                    <span class="text-green-600">-￥2,000</span>
                                </div>
                                <div class="flex justify-between pt-2 border-t border-gray-200">
                                    <span class="font-bold">应付总额:</span>
                                    <span class="font-bold text-xl text-orange-600">￥40,800</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="flex justify-end mt-6">
                    <button class="bg-orange-500 hover:bg-orange-600 text-white py-2 px-6 rounded-lg mr-3">
                        <i class="fas fa-truck mr-2"></i>确认收货
                    </button>
                    <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-6 rounded-lg">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部信息 -->
    <footer class="bg-gray-800 text-white py-10 mt-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">平台介绍</h3>
                    <p class="text-gray-400">大宗商品交易B2B商城是专业的工业原材料交易平台，为全球买家和供应商提供高效、安全的交易服务。</p>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">友情链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">我的钢铁网</a></li>
                        <li><a href="#" class="hover:text-white">中商产业研究院</a></li>
                        <li><a href="#" class="hover:text-white">中国钢铁工业协会</a></li>
                        <li><a href="#" class="hover:text-white">有色金属协会</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">联系方式</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><i class="fas fa-phone mr-2"></i> 400-123-4567</li>
                        <li><i class="fas fa-envelope mr-2"></i> service@b2b-market.com</li>
                        <li><i class="fas fa-map-marker-alt mr-2"></i> 上海市浦东新区陆家嘴金融中心</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-600">
                            <i class="fab fa-wechat"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-600">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-600">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
                <p>&copy; 2025 大宗商品交易B2B商城. 保留所有权利. 沪ICP备12345678号</p>
            </div>
        </div>
    </footer>
</body>
</html>